import React from 'react'
import { useState, useEffect } from 'react'
import { Button } from 'antd'
import axios from 'axios'

export default function TaobaoElegant() {
  const [data, setData] = useState([]);
  const [refreshData, setRefreshData] = useState(true);

  const searchChange = async () => {
    const response = await axios.get('https://api.vvhan.com/api/tao')
    setData(response.config.url)
    setRefreshData(false);
  }

  useEffect(() => {
    searchChange()
  }, [refreshData])

  return (
    <div>
      <Button type="primary" onClick={() => searchChange(!refreshData)}>开盲盒</Button>
      <div>
        <div style={{ width: '260px', height: '400px', margin: '0 auto', marginTop: '130px' }}>
          <img style={{ width: '100%', height: '100%' }} src={data}></img>
        </div>
      </div>
    </div>
  )
}
